<template>
    <div class="box">
      <Nav></Nav>
      <div class="content">
        <ul>
          <li v-for="(item,index) in data" :class="{active:cur==index}" @click="tab(index)">{{item}} <span v-if="cur==index">|</span></li>
        </ul>
        <div class="right">
          <component :is="com"></component>
        </div>
      </div>
      <Tabbar></Tabbar>
    </div>
</template>

<script>
  import Nav from '../com/Nav'
  import Tabbar from '../com/Tabbar'
  import Tuijian from './Tuijian'
  import Huli from './Huli'
    export default {
      name: "Fenlei",
      data(){
        return {
          data:['为您推荐','面部护理','底妆彩妆','休闲零食','身体护理','美容美发','生活用品','个人护理','保健养生','时尚潮品','母婴用品'],
          datas:['Tuijian','Huli','Tuijian','Huli','Tuijian','Huli','Tuijian','Huli','Tuijian','Huli','Tuijian',],
          com:'Tuijian',
          bol:false,
          cur:0
        }
      },
      methods:{
        tab(i){
          this.cur = i;
          this.com = this.datas[i];
        }
      },
      components:{
        Nav,
        Tabbar,
        Tuijian,
        Huli
      }
    }
</script>

<style scoped>
  .box{
    padding-top: 10rem;
    padding-bottom: 25rem;
  }
 .content{
    display: flex;
    width: 100%;
    height: 104rem;
 }
 ul{
    width: 17.9rem;
    height: 104rem;
    border-right: 1px solid #ccc;
 }
  ul>li{
    position: relative;
    width: 17.9rem;
    height: 8rem;
    border-bottom: 1px solid #ccc;
    text-align: center;
    line-height: 8rem;
    font-size: 28px;
    cursor: pointer;
  }
 ul>li>span{
   position: absolute;
   right: 0;
   color: #e53e42;
 }
  .right{
    width: 54.1em;
    height: 104rem;
  }
  .active{
    color:#e83d41;
  }
</style>
